<template>
  <div class="yxp-word-box" id="wordBox">
  <div class="yxp-wordList-box">
    <div class="yxp-wordList-box-item">
    <div class="yxp-wordList-main">
          <div class="yxp-wordList-item list-item" v-for="(item,i) in dataList" :key="item.id" @click="handlePlay(item,i)">
            <div class="yxp-wordList-item-l" :class="{active: item.num > 0 && curIndex === i}">
              <span class="word-en">{{item.word}}</span>
              <span class="word-zh" v-show="item.num === 2 && curIndex === i">{{item.translate}}</span>
            </div>
            <div class="yxp-wordList-item-r">
              <div class="success img1" v-show="item.isSuccess" @click.stop="handleSelectSuccess(i,item)"></div>
              <div class="success img2" v-show="!item.isSuccess" @click.stop="handleSelectSuccess(i,item)"></div>
              <div class="success img3" v-show="!item.isError" @click.stop="handleSelectError(i,item)"></div>
              <div class="success img4" v-show="item.isError" @click.stop="handleSelectError(i,item)"></div>
            </div>
          </div>
          </div>
        </div>
      </div>
      <audio ref="audio"></audio>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      dataList: [],
      curIndex: 0
    }
  },
  mounted () {
    console.log(this.data)
    this.dataList = this.data
  },
  methods: {
    handleSelectSuccess (i, item) {
      if (item.isSuccess) return
      let obj = this.dataList[i]
      this.$set(obj, 'isError', false)
      this.$set(obj, 'isSuccess', true)
      let params = {
        id: item.id,
        type: 1
      }
      if (item.changed) {
        params.word = item.changed
      }
      this.$emit('check', params)
    },
    handleSelectError (i, item) {
      if (item.isError) return
      let obj = this.dataList[i]
      this.$set(obj, 'isSuccess', false)
      this.$set(obj, 'isError', true)
      let params = {
        id: item.id,
        type: 0
      }
      if (item.changed) {
        params.word = item.changed
      }
      this.$emit('check', params)
    },
    // 播放语音
    handlePlay (item, i) {
      this.curIndex = i
      let num = item.num
      num++
      if (num > 2) num = 1
      this.$set(item, 'num', num)
      let audio = this.$refs.audio
      audio.src = item.project_voice
      audio.play()
      this.dataList.map((elem,index) => {
        if (index !== i) {
          this.$set(elem, 'num', 0)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.yxp-wordList-main {
  text-align: left;
  .active {
    .word-en {
      font-size: 30px;
      font-weight: bold;
    }
    .word-zh {
      font-size: 20px;
      font-weight: 400;
    }
  }
  .yxp-wordList-item-l {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin-right: 40px;
    padding-left: 40px;
  }
  .yxp-wordList-item-r {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 22%;
    padding-right: 40px;
    .success {
      width: 30px;
      height: 30px;
      background: url(../assets/word/success.png) no-repeat;
      background-size: 100% 100%;
      img {
        width: 30px;
        height: 30px;
      }
      &:last-child {
        margin-left: 20px;
      }
      &:nth-child(2) {
        background-image: url(../assets/word/success-normal.png)
      }
      &:nth-child(3) {
        margin-left: 20px;
        background-image: url(../assets/word/error-normal.png)
      }
      &:nth-child(4) {
        background-image: url(../assets/word/error-sel.png)
      }
    }
    .img2 {
      &:hover {
        background-image: url(../assets/word/success-hover.png)
      }
    }
    .img3 {
      &:hover {
        background-image: url(../assets/word/error-hover.png)
      }
    }
  }
}
</style>
